<template>
  <div class="tmpl">
    <h4>{{info.title}}</h4>
    <p class="info">
      <span>发表时间：{{info.add_time | dateFormat}}</span>
      <span>点击了：{{info.click}}次</span>
    </p>
    <hr>

    <div class="content" v-html="info.content"></div>

    <!-- 引用了评论组件 -->
    <mysub :artId="$route.params.id"></mysub>
  </div>
</template>


<script>
import { Toast } from 'mint-ui'

// 1. 导入评论子组件
import comment from '../subcom/comment.vue'
// 2. 将 comment 子组件，通过父组件的 components 属性，定义为 newsinfo 组件的子组件

// 获取数据
export default {
  data() {
    return {
      info: {} // 新闻详情数据对象
    }
  },
  created() {
    this.getNewsInfoById();
  },
  methods: { // 业务逻辑
    getNewsInfoById() { // 根据Id获取新闻详情
      this.$http.get('api/getnew/' + this.$route.params.id).then(res => {
        var result = res.body;
        if (result.status === 0) {
          this.info = result.message[0];
        } else {
          Toast('获取新闻详情失败！'); // 意识流
        }
      });
    }
  },
  components: { mysub: comment } // 把 评论组件，注册为 当前组件的 子组件
}

// 如果要在父组件中，注册并使用子组件，需要哪几步？
// 1. 先定义一个单独的 .vue 组件
// 2. 把刚定义的 .vue 组件，使用 import 导入到当前父组件中
// 3. 在父组件身上，定义个 components 属性，把 导入的组件，直接放到属性中
// 4. 以标签形式，应用 刚才通过 components 属性 注册的子组件
</script>

<style lang="scss">
.tmpl {
  padding: 5px;
}

.info {
  display: flex;
  justify-content: space-between;
  color: #26A2FF;
}

.content img{
  width: 100%;
}
</style>